/* eslint-disable quote-props */
import React, {useEffect, useCallback, useState} from 'react';
import {
    Typography,
    Divider,
    Button,
    Form,
    Select,
    Row,
    Col,
    Space,
    DatePicker
} from 'antd';
import {useMount, useDebounceFn} from 'ahooks';
import {DownloadOutlined} from '@ant-design/icons';
import moment from 'moment';
import {liveDownload} from '~/service/liveMonitor';
import CommonCard from '../common/CommonCard';
import CommonTable from '../common/CommonTable';

import {BizLineList, LiveRoomTypeList, LiveEngine, SortLabelToValue, dimensionMap} from '../config';

import '../style.styl';
import './index.styl';

const {Title} = Typography;
const {Option} = Select;
const {RangePicker} = DatePicker;

export default () => {

    const [form] = Form.useForm();
    const [searchParams, setSearchParams] = useState([]);

    const [sortInfo, setSortInfo] = useState({});
    const [formLoading, setFormLoading] = useState(true);
    const [downloadLoading, setDownloading] = useState(false);
    const [isDownloadShow, setIsDownloadShow] = useState(false);

    const handleFinish = values => {
        setFormLoading(true);
        const keys = Object.keys(values);
        const dimensionAndValues = keys?.filter(i => values[i])?.map(i => {
            let value = [values[i]];
            if (Array.isArray(values[i])) {
                value = values[i]?.map(item =>
                    (
                        (item instanceof moment || moment.isMoment(item))
                            ? item.format('YYYY-MM-DD')
                            : item
                    ));
            }
            return {
                dimensionId: i,
                dimensionName: dimensionMap.get(i),
                value,
            };
        });
        setSearchParams(dimensionAndValues);
        setSortInfo({});
    };
    const handleReset = () => {
        setFormLoading(true);
        form.resetFields();
        form.submit();
        setSortInfo({});
    };

    const {run: handleDebounceFinish} = useDebounceFn(values => {
        handleFinish(values);
    }, {wait: 500});

    const handleDownload = useCallback(async () => {
        setDownloading(true);
        const resultParams = {
            dimensionAndValues: searchParams,
            unitId: 'LiveRoomList_PartOne_excel',
        };
        if (sortInfo?.column) {
            resultParams.orderOptions = [
                {
                    fieldId: sortInfo?.column?.fieldId,
                    name: sortInfo?.column?.dataIndex,
                    columnName: sortInfo?.column?.key,
                    fieldType: '',
                    sortRule: SortLabelToValue[sortInfo.order],
                }
            ];
        }
        const res = await liveDownload(resultParams);
        setDownloading(false);
    }, [searchParams, sortInfo]);

    useMount(() => {
        form.submit();
    });


    return (
        <div className="liveBoard">
            <Title level={3}>直播间监控列表</Title>

            <Form
                form={form}
                name="basic"
                initialValues={{
                    'LiveRoomMonitoringList_select_live_begin_time': [moment(), moment()],
                    'LiveRoomMonitoringList_select_biz_typ': '高途课堂',
                    'LiveRoomMonitoringList_select_room_type': '全部',
                    'LiveRoomMonitoringList_select_engine_type': '全部',
                }}
                onFinish={handleDebounceFinish}
                labelCol={{span: 6}}
            >
                <Row gutter={24}>
                    <Col span={8}>
                        <Form.Item
                            label="日期"
                            name="LiveRoomMonitoringList_select_live_begin_time"
                        >
                            <RangePicker allowClear={false} />
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            label="业务线"
                            name="LiveRoomMonitoringList_select_biz_typ"
                        >
                            <Select
                                getPopupContainer={node => node.parentNode}
                            >
                                {
                                    BizLineList.map(item => (
                                        <Option
                                            value={item.value}
                                            key={item.value}
                                        >
                                            {item.name}
                                        </Option>
                                    ))
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item
                            label="直播间类型"
                            name="LiveRoomMonitoringList_select_room_type"
                        >
                            <Select
                                getPopupContainer={node => node.parentNode}
                            >
                                {
                                    LiveRoomTypeList.map(item => (
                                        <Option
                                            value={item.value}
                                            key={item.value}
                                        >
                                            {item.name}
                                        </Option>
                                    ))
                                }
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row gutter={24} justify="space-between">
                    <Col span={8}>
                        <Form.Item
                            label="直播引擎"
                            name="LiveRoomMonitoringList_select_engine_type"
                        >
                            <Select
                                getPopupContainer={node => node.parentNode}
                            >
                                {
                                    LiveEngine.map(item => (
                                        <Option
                                            value={item.value}
                                            key={item.value}
                                        >
                                            {item.name}
                                        </Option>
                                    ))
                                }
                            </Select>
                        </Form.Item>
                    </Col>


                    <Col>
                        <Space>
                            <Button
                                type="primary"
                                htmlType="submit"
                                loading={formLoading}
                            >
                                搜索
                            </Button>
                            <Button
                                type="default"
                                htmlType="button"
                                onClick={handleReset}
                                loading={formLoading}
                            >
                                重置
                            </Button>
                        </Space>
                    </Col>
                </Row>
            </Form>
            <div className="list-card">
                <CommonCard
                    title="直播间列表"
                    extra={
                        isDownloadShow && (
                            <Button
                                type="link"
                                onClick={handleDownload}
                                icon={<DownloadOutlined />}
                                className="download-btn"
                                loading={formLoading || downloadLoading}
                            />
                        )
                    }
                >
                    <CommonTable
                        searchParams={searchParams}
                        title="直播间列表"
                        rowKey="直播间号"
                        scroll={{x: 'max-content'}}
                        sortInfo={sortInfo}
                        setSortInfo={setSortInfo}
                        loading={formLoading}
                        setLoading={setFormLoading}
                        className="live-list-table"
                        setBtnShow={setIsDownloadShow}
                    />
                </CommonCard>
            </div>
        </div>
    );
};
